<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>FunCalc 1.1 | by linlin1195</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .calculator {
            background: #000;
            padding: 20px;
            border-radius: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            width: 320px;
        }

        .display {
            background: #000;
            color: white;
            font-size: 3.5em;
            text-align: right;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 15px;
            min-height: 80px;
        }

        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        button {
            border: none;
            padding: 20px;
            font-size: 1.8em;
            border-radius: 50%;
            cursor: pointer;
            transition: 0.2s;
        }

        button:active {
            filter: brightness(130%);
        }

        .num-btn {
            background: #333;
            color: white;
        }

        .func-btn {
            background: #a5a5a5;
            color: black;
        }

        .operator-btn {
            background: #ff9f0a;
            color: white;
        }

        #zero {
            grid-column: 1 / 3;
            width: auto;
            border-radius: 35px;
            text-align: left;
            padding-left: 30px;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <div class="display">0</div>
        <div class="buttons">
            <button class="func-btn">AC</button>
            <button class="func-btn">±</button>
            <button class="func-btn">%</button>
            <button class="operator-btn">÷</button>
            
            <button class="num-btn">7</button>
            <button class="num-btn">8</button>
            <button class="num-btn">9</button>
            <button class="operator-btn">×</button>
            
            <button class="num-btn">4</button>
            <button class="num-btn">5</button>
            <button class="num-btn">6</button>
            <button class="operator-btn">−</button>
            
            <button class="num-btn">1</button>
            <button class="num-btn">2</button>
            <button class="num-btn">3</button>
            <button class="operator-btn">+</button>
            
            <button class="num-btn" id="zero">0</button>
            <button class="num-btn">.</button>
            <button class="operator-btn">=</button>
        </div>
    </div>

    <script>
        let display = document.querySelector('.display');
        let currentInput = '0';
        let firstOperand = null;
        let operator = null;
        let shouldResetScreen = false;

        document.querySelectorAll('button').forEach(button => {
            button.addEventListener('click', () => {
                const value = button.textContent;

                if (value.match(/[0-9]|\./)) {
                    handleNumber(value);
                } else if (value.match(/[÷×−+]/)) {
                    handleOperator(value);
                } else if (value === '=') {
                    calculate();
                } else {
                    handleFunction(value);
                }
            });
        });

        function handleNumber(num) {
            if (shouldResetScreen) {
                currentInput = '';
                shouldResetScreen = false;
            }
            
            if (num === '.') {
                if (!currentInput.includes('.')) {
                    currentInput += num;
                }
            } else {
                currentInput = currentInput === '0' ? num : currentInput + num;
            }
            updateDisplay();
        }

        function handleOperator(op) {
            const inputValue = parseFloat(currentInput);
            if (firstOperand === null) {
                firstOperand = inputValue;
            } else if (operator) {
                firstOperand = calculateResult(firstOperand, inputValue, operator);
                updateDisplay(firstOperand);
            }
            operator = op;
            shouldResetScreen = true;
        }

        function calculate() {
            if (operator === null) return;
            const inputValue = parseFloat(currentInput);
            currentInput = calculateResult(firstOperand, inputValue, operator);
            firstOperand = null;
            operator = null;
            updateDisplay(currentInput);
            shouldResetScreen = true;
        }

        function calculateResult(a, b, op) {
            switch(op) {
                case '+': return a + b;
                case '−': return a - b;
                case '×': return a * b;
                case '÷': return a / b;
                default: return b;
            }
        }

        function handleFunction(func) {
            switch(func) {
                case 'AC':
                    currentInput = '0';
                    firstOperand = null;
                    operator = null;
                    break;
                case '±':
                    currentInput = (parseFloat(currentInput) * -1).toString();
                    break;
                case '%':
                    currentInput = (parseFloat(currentInput) / 100).toString();
                    break;
            }
            updateDisplay();
        }

        function updateDisplay(value = currentInput) {
            display.textContent = value.toString().slice(0, 10);
        }
    </script>
</body>
</html>